<template>
  <div id="lists">
    <ul>
      <span v-for="(data, index) in lists" :key="index">
        <li :id="data.id" class="line" @click="setInformation(data)">
          {{ data.text }}
        </li>
      </span>
      <li class="under topline">关于我们•联系我们</li>
      <li class="under">@2022 校园二手市场</li>
    </ul>
  </div>
</template>

<script>
import VueCookies from "vue-cookies";

export default {
  props: ["lists", "getListData"],
  methods: {
    setInformation: function (data) {
      this.uis = JSON.parse(VueCookies.get("uid"));
      if (!this.uis) {
        alert("未登录，请先登录！");
        return false;
      } else {
        // 更新类型提示
        this.$emit("setDefaults", data);
        // 获取更新
        this.$emit("getListData", data.text);
      }
    },
  },
  data() {
    return {};
  },
};
</script>

<style scoped>
@font-face {
  font-family: "iconfont";
  src: url("../fonts/iconfont_two.ttf") format("truetype");
}
* {
  margin: 0;
  padding: 0;
  overflow: hidden;
}
#lists {
  width: 200px;
  height: 500px;
  text-align: center;
  position: fixed;
  top: 100px;
  background-color: #fff;
}
#lists .line {
  width: 100%;
  height: 50px;
  line-height: 50px;
  font-family: "iconfont" !important; /*导入矢量图*/
}

#lists #new::before {
  content: "\e6da";
  font-size: 25px;
  color: crimson;
}
#lists #digital:before {
  content: "\f816";
  font-size: 25px;
  color: #007abe;
}
#lists #walking:before {
  content: "\e618";
  font-size: 25px;
  color: #c26868;
}
#lists #daily:before {
  content: "\e607";
  font-size: 25px;
  color: #8346a3;
}
#lists #book:before {
  content: "\e60e";
  font-size: 25px;
  color: #138e39;
}
#lists #clothes:before {
  content: "\e626";
  font-size: 25px;
  color: #be9d17;
}
#lists #movement:before {
  content: "\e606";
  font-size: 25px;
  color: #f3801c;
}
#lists #ticket:before {
  content: "\e602";
  font-size: 25px;
  color: #319482;
}

#lists .line:hover {
  background-color: #0db9f8;
  cursor: pointer; /* 经过有手指*/
}

#lists .topline {
  border-top: 1px solid #99a0b2;
  padding-top: 10px;
}

#lists .under {
  color: #99a0b2;
  margin-top: 10px;
}
</style>